<template>
  <div>
    <ul class="course_type_list" >
      <li  v-for="coursestart in this.$store.state.coursestarts ">
        <div class="box">
          <img :src="coursestart.img_source" alt="">
          <div class="info">
            <h4><a href="#">{{coursestart.name}}</a></h4>
            <span class="duration">共{{ Math.ceil((Date.parse(coursestart.end)-Date.parse(coursestart.start))/1000/60/60/24/7) }}周</span>
          </div>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="uimg">
                <img :src="coursestart.teacher.image" alt="">
              </li>
              <li class="username">{{coursestart.teacher.nickname}}</li>
              <li class="visitedicon"><font-awesome-icon :icon="['far', 'eye']"></font-awesome-icon></li>
              <li class="visitednum">{{coursestart.visitednum>10000?(((coursestart.visitednum-coursestart.visitednum%1000)/10000+'W')):(coursestart.visitednum)}}</li>
              <li class="praisedicon"><font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon></li>
              <li class="praisednum">{{coursestart.praisednum>10000?(((coursestart.praisednum-coursestart.praisednum%1000)/10000+'W')):(coursestart.praisednum)}}</li>
            </ul>
          </div>
          <hr>
          <div class="dinfo">
            <span class="time">距开始还有</span>
            <span style="color: red;font-size: large">{{ Math.ceil((Date.parse(coursestart.start)-new Date())/1000/60/60/24) }}天</span>
            <el-button type="danger" plain class="button" @click="coursecancel(coursestart.id)">取消课程</el-button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject:['reload'],  //注入依赖
  name: "studentcoursecoursestart",
  data() {
    return {
      coursestarts:[],
    }
  },
  created() {
    this.coursestarts = this.$store.state.coursestarts
  },
  methods:{
    coursecancel:function(id){
      this.$confirm('确定要取消课程学习吗，该操作会删除当前课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete(this.baseUrl+"user/delmycoursebyuidcid",{params:{cid:id}})
          .then(res=>{
            console.log(res.data);
            for (let i = 0; i <this.coursestarts.length ; i++) {
              if(this.coursestarts.id === id){
                this.coursestarts.splice(i,1);
              }
            }
            this.$store.commit('setCoursestarts',this.coursestarts);
            this.reload();
          });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
  }
}
</script>

<style scoped>
@import "../../assets/css/course.css";
@import "../../assets/css/student.css";

</style>
